<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <!-- <style>
    /* .box{
      width:200px;
      height: 200px;
      background-color:red;
    } */
    .one{
      width:200px;
      height: 200px;
      background-color:red;
    }
  </style> -->
  <!-- <style>
    .box{
      width: 200px;
      height: 200px;
      background-color: red;
    }
  </style> -->

</head>
<body>
  <!-- 隔行变色 鼠标进入高亮显示 -->
  <ul>
    <li>三国</li>
    <li>水浒</li>
    <li>西游记</li>
    <li>红楼梦</li>
  </ul>
  <script>
    var lis = document.querySelectorAll('li')
    for(var i = 0; i < lis.length; i++){
      // 通过判断 奇/偶行  设置不同的背景色
      if(i % 2 == 0){
        lis[i].style.backgroundColor = 'pink'
      }else{
        lis[i].style.backgroundColor = 'green'
      }
      // 设置鼠标进入事件 鼠标进入每个li的时候 进入的li本身 高亮显现
      lis[i].onmouseenter = function(){
        this.style.backgroundColor = "yellow"
      }
      // 设置鼠标离开事件 鼠标离开当前li的时候 li显示原来的颜色
        if(i % 2 == 0){
          lis[i].onmouseleave = function(){
            this.style.backgroundColor =  'pink';
          }
        }else{
          lis[i].onmouseleave = function(){
            this.style.backgroundColor = 'green';
          }
      } 
    }
  </script>
  <!-- <script>
    var lis = document.querySelectorAll('li');
    // 通过判断 奇/偶行 给每个li设置不同的背景色
    for(var i = 0; i < lis.length; i++){
      if(i % 2 == 0){
        lis[i].style.backgroundColor = 'pink';
      }else{
        lis[i].style.backgroundColor = 'green';
      }

      var bg;
      // 设置鼠标进入事件 鼠标进入每个li的时候 进入的li本身 高亮显现
      lis[i].onmouseenter = function(){
        //先获取该标签原来的颜色
        bg = this.style.backgroundColor
        this.style.backgroundColor = 'yellow';
      }
      //设置鼠标离开事件 鼠标离开当前li的时候 li显示原来的颜色
      lis[i].onmouseleave = function(){
        //采用一个变量保存原来的颜色 之后在将这个颜色赋值给 鼠标离开事件后 li显示的颜色
        this.style.backgroundColor = bg;
      }
    }
  </script> -->

  <!-- <div class="box"></div>
  <script>
    var div = document.querySelector('.box');
    //鼠标悬停时候的事件
    div.onmouseover = function(){
      this.style.backgroundColor = 'pink'
    }
    //鼠标离开时候的事件
    div.onmouseout = function(){
      this.style.backgroundColor = 'red';
    }
  </script> -->


<!-- <div class="box"></div>
<script>
  var div = document.querySelector('.box');
  console.log(div)
  
  //设置鼠标进入事件
  div.onmouseenter = function(){
    this.style.backgroundColor = "pink";
  }

  //设置鼠标离开事件
  div.onmouseleave = function(){
    this.style.backgroundColor = "red"
  }
</script> -->


   <!-- 通过js实现元素的隐藏和显示 -->
  <!-- <div class="box"></div>
  <input type="button" value="显示">
  <input type="button" value="隐藏"> -->
  <!-- <script>
    var div = document.querySelector('.box');
    var show = document.querySelector('input:nth-child(2)');
    var hidden = document.querySelector('input:nth-child(3)');
    //使用display属性
    hidden.onclick = function(){
      div.style.display = "none";
    }

    // show.onclick = function(){
    //   div.style.display = "block";
    // }

    //使用classList属性 隐藏和显示(classList主要通过添加类名 控制标签样式)
    //方法一
    hidden.onclick = function(){
      div.classList.remove("one");
    }
    show.onclick = function(){
      div.classList.add("one")
    }
    //方法二 (通过点击一个按钮 实现 隐藏和显示的切换)
    hidden.onclick = function(){
      div.classList.toggle("one")
    }

    //使用className属性 隐藏和显示(className主要通过添加类名 控制标签样式)
    hidden.onclick = function(){
      div.className = '';
    }
    show.onclick = function(){
      div.className ='one';
    }
  </script> -->


  <!-- <input type="text">
  <script>
    var input = document.querySelector('input')
    //当输入框获取焦点时候触发的事件
    input.onfocus = function(){
      this.style.backgroundColor = "pink";
    }

    //当输入框中鼠标失去焦点的时候触发的事件
    input.onblur = function(){
      this.style.backgroundColor = "";
    }
  </script> -->
 

</body>
</html>